<template>
  <div>
    <el-col>
      <vxe-table
        ref="editable"
        v-loading="loading"
        :data="tableColList"
        class="vxe-table-element"
        auto-resize
        height="400"
        :edit-config="{
                  trigger: 'click',
                  mode: 'cell',
                  autoClear: true
                  }"
        style="width: 100%;">
        <vxe-table-column
          type="index"
          fixed="left"
          width="50"></vxe-table-column>
        <vxe-table-column
          field="columnName"
          fixed="left"
          title="字段名" width="100"></vxe-table-column>
        <vxe-table-column
          field="columnType"
          title="字段类型"
          fixed="left"
          width="100"></vxe-table-column>
        <vxe-table-column
          field="comments"
          title="字段说明"
          fixed="left"
          width="120"></vxe-table-column>
        <vxe-table-column
          :header-align="'center'"
          title="列表设置">
          <vxe-table-column
            field="isList"
            title="显示列"
            :edit-render="{type: 'default'}"
            width="80">
            <template v-slot:edit="scope" @change="$refs.editable.updateStatus(scope)">
              <el-checkbox v-model="scope.row.isList" true-label="1" false-label="0"></el-checkbox>
            </template>
            <template v-slot="{ row }">
              <el-tag :type="getTagType(row.isList)">{{ getTagLable(row.isList) }}</el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="sortType"
            title="排序"
            width="80"
            :edit-render="{name: 'ElSelect',type:'default',
          options:sortList,fields:{clearable:true},optionProps:optionfields}">
          </vxe-table-column>
          <vxe-table-column
            field="formatType"
            title="格式"
            width="80"
            :edit-render="{name: 'ElSelect',type:'default',
          options:formatList,fields:{clearable:true},optionProps:optionfields}">
          </vxe-table-column>
          <vxe-table-column
            field="alignType"
            title="对齐"
            width="80"
            :edit-render="{name: 'ElSelect',type:'default',
          options:alignList,fields:{clearable:true},optionProps:optionfields}">
          </vxe-table-column>
          <vxe-table-column
            field="widthType"
            title="宽度"
            width="80"
            :edit-render="{name: 'ElSelect',type:'default',
          options:widthList,fields:{clearable:true},optionProps:optionfields}">
          </vxe-table-column>
          <vxe-table-column
            :header-align="'center'"
            title="查询面板">
            <vxe-table-column
              field="isQuery"
              title="条件"
              :edit-render="{type:'default'}"
              width="80">
              <template v-slot:edit="scope" @change="$refs.editable.updateStatus(scope)">
                <el-checkbox v-model="scope.row.isQuery" true-label="1" false-label="0"></el-checkbox>
              </template>
              <template v-slot="{ row }">
                <el-tag :type="getTagType(row.isQuery)">{{ getTagLable(row.isQuery) }}</el-tag>
              </template>
            </vxe-table-column>
            <vxe-table-column
              field="queryType"
              title="匹配" width="100"
              :edit-render="{name: 'ElSelect',type:'default',
          options:queryTypeList,fields:{clearable:true},optionProps:optionfields}">
            </vxe-table-column>
          </vxe-table-column>
          <vxe-table-column
            field="totalType"
            title="合计列"
            width="80"
            :edit-render="{name: 'ElSelect',type:'default',
          options:totalTypeList,fields:{clearable:true},optionProps:optionfields}">
          </vxe-table-column>
        </vxe-table-column>
        <vxe-table-column
          :header-align="'center'"
          title="编辑表单设置">
          <vxe-table-column
            field="isEdit"
            title="编辑"
            :edit-render="{type:'default'}"
            width="80">
            <template v-slot:edit="scope" @change="$refs.editable.updateStatus(scope)">
              <el-checkbox v-model="scope.row.isEdit" true-label="1" false-label="0"></el-checkbox>
            </template>
            <template v-slot="{ row }">
              <el-tag :type="getTagType(row.isEdit)">{{ getTagLable(row.isEdit) }}</el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="showType"
            title="表单类型"
            width="140"
            :edit-render="{name: 'ElSelect',type:'default',options:showTypeList,optionProps:optionfields}"></vxe-table-column>
          <vxe-table-column
            field="optionsLayout"
            title="布局方式"
            width="120"
            :edit-render="{name: 'ElSelect',type:'default',options:layoutList,optionProps:optionfields}"></vxe-table-column>
          <vxe-table-column
            field="dictType"
            title="字典类型"
            width="180"
            headerAlign="center"
            align="left"
            :edit-render="{name: 'ElSelect',type:'default',options:dictList,props:{clearable:true},optionProps:{ value: 'key', title: 'label' }}">
            <template v-slot="{ row }">
              {{ row.dictType }}
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="valids"
            title="验证类型"
            width="320"
            headerAlign="center"
            align="left"
            :edit-render="{name: 'ElSelect',type:'default',options:validList,props: {multiple: true},optionProps:optionfields}"></vxe-table-column>
        </vxe-table-column>
      </vxe-table>
    </el-col>
    <el-col :style="'margin-top: 5px;'">
      <el-form :model="dataForm" ref="dataForm" :label-width="$i18n.locale === 'en-US' ? '140px' : '160px'">
        <el-col :span="24">
          <el-form-item label="数据权限">
            <el-checkbox-group v-model="dataForm.ruleSorts">
              <el-checkbox v-for="item in ruleSortList" :label="item.value" :key="item.value">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="固定表头">
            <el-switch v-model="dataForm.headLock"
                       active-text="固定"
                       inactive-text="不固定"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="17">
          <el-form-item label="锁定列">
            <!--文本框-->
            <el-select
              v-model="dataForm.columnLocks"
              multiple
              style="width: 100%"
              clearable>
              <el-option
                v-for="item in tableColList"
                :key="item.columnName"
                :label="item.comments"
                :value="item.columnName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-form>
    </el-col>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'

export default {
  data () {
    return {
      loading: false,
      tableColList: [],
      deltList: [],
      dataForm: {
        ruleSorts: [],
        headLock: true,
        columnLocks: []
      },
      javaFieldList: this.$getDictList('GEN_JAVA_FIELD_TYPE', true),
      sortList: this.$getDictList('GEN_SORT_TYPE', true),
      formatList: this.$getDictList('GEN_FORMAT_TYPE', true),
      alignList: this.$getDictList('GEN_ALIGN_TYPE', true),
      widthList: this.$getDictList('GEN_WIDTH_TYPE', true),
      totalTypeList: this.$getDictList('GEN_TOTAL_TYPE', true),
      queryTypeList: this.$getDictList('GEN_QUERY_TYPE', true),
      showTypeList: this.$getDictList('GEN_EDIT_TYPE', true),
      layoutList: this.$getDictList('GEN_EDIT_LAYOUT', true),
      validList: this.$getDictList('GEN_VALID_TYPE', true),
      dictList: [],
      ruleSortList: [],
      optionfields: { value: 'val', title: 'title' },
      dsCode: '',
      tableName: '',
      childTableCode: ''
    }
  },
  methods: {
    init () {
      this.loading = true
      this.$nextTick(() => {
        this.initDictList()
        this.getRuleSort()
        this.getInfo()
        this.getColInfo()
        this.loading = false
      })
    },
    getTagType (val) {
      if (val === '1') {
        return 'success'
      } else {
        return 'danger'
      }
    },
    // 获取数据字典类型
    initDictList () {
      this.dictList = window.SITE_CONFIG['dictData']
    },
    // 获取数据权限列表
    getRuleSort () {
      this.$http.get(`/sys/sysRuleSort/list`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.ruleSortList = res.data
        this.$xeutils.arrayEach(this.ruleSortList, (item, key) => {
          this.dataForm.ruleSorts.push(item.value)
        })
      })
    },
    getTagLable (val) {
      if (val === '1') {
        return '是'
      } else {
        return '否'
      }
    },
    // 获取信息
    getInfo () {
      this.$http.get(`/gen/genTable/genInfo?dsCode=${this.dsCode}&tableName=${this.tableName}`).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.dataForm.id = res.data.id
        this.dataForm.tenantFlag = res.data.tenantFlag
        this.dataForm.languageFlag = res.data.languageFlag
        if (res.data.ruleSorts != null) {
          this.dataForm.ruleSorts = res.data.ruleSorts
        }
        this.dataForm.headLock = res.data.headLock
        this.dataForm.columnLocks = res.data.columnLocks
      })
    },
    // 获取信息
    getColInfo () {
      this.$http.get(`/gen/genTableColumn/parentColListByTableName?dsCode=${this.dsCode}&&tableName=${this.tableName}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.tableColList = res.data.filter((value, index, array) => {
          return value.isDelt === '0'
        })
        this.deltList = res.data.filter((value, index, array) => {
          return value.isDelt === '1'
        })
      }).catch(() => {})
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      if (this.tableColList.length <= 0) {
        this.$message({
          message: '表字段信息不能为空',
          type: 'error',
          duration: 1500
        })
        return false
      }

      this.$http.post('/gen/genTableColumn/saveOrUpdate', {
        'colList': this.tableColList,
        'deltList': this.deltList,
        'tableInfo': this.dataForm
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            if (this.childTableCode) {
              this.$emit('setActiveName', 'child', this.dsCode, this.tableName, this.childTableCode)
            } else {
              this.$emit('setActiveName', 'gene', this.dsCode, this.tableName)
            }
          }
        })
      }).catch(() => {})
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
